<template>
  <div class="container">
    <div class="section">
      <h2 class="title">
        拼团设置
      </h2>
      <ul class="info">
        <li class="list-item">
          <div class="tip">
            发起拼团超过：
          </div>

          <div class="content">
            <el-input-number v-model="form_data.startGroupLimitHour"
                             :min="0"
                             :precision="0"
                             placeholder="请输入时间"></el-input-number>
          </div>
          小时
          <div class="content">
            <el-input-number v-model="form_data.startGroupLimitMinute"
                             :min="0"
                             :precision="0"
                             placeholder="请输入时间"></el-input-number>
          </div>
          分钟&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;未拼成，拼团失败
        </li>
        <li class="list-item">
          <div class="tip">
            待拼团剩余：
          </div>
          <div class="content">
            <el-input-number v-model="form_data.finishGroupLimitHour"
                             :min="0"
                             :precision="0"
                             placeholder="请输入时间"></el-input-number>
          </div>
          小时
          <div class="content">
            <el-input-number v-model="form_data.finishGroupLimitMinute"
                             :min="0"
                             :precision="0"
                             placeholder="请输入时间"></el-input-number>
          </div>
          分钟&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;差
          <div class="content">
            <el-input-number v-model="form_data.finishGroupLimitPersonNum"
                             :min="0"
                             :precision="0"
                             placeholder="请输入人数"></el-input-number>
          </div>
          人未拼成，自动凑团
        </li>

      </ul>
      <div class="sub-btn">
        <el-button type="primary"
                   size="medium "
                   @click="save_form()">保存</el-button>
      </div>
    </div>
  </div>

</template>
<script>
  import { getGroup, groupSetting } from '../../api/group'

export default {
  data () {
    return {
      form_data: {
        "startGroupLimitHour": 0,
        "startGroupLimitMinute": 0,
        "finishGroupLimitHour": 0,
        "finishGroupLimitMinute": 0,
        "finishGroupLimitPersonNum": 0
      },
      num: '',
    }
  },
  methods: {
    save_form () {
      groupSetting(this.form_data).then((result) => {
        let res = result.data
        if (res.code === 0) {
          this.$message({
            type: 'success',
            message: '设置成功!'
          });
        } else {
          this.$message.error(res.msg);
        }
      }).catch((err) => {
        this.$message.error('服务器网络错误，请稍后重试');
      });
    },
    get_Setting () {
     getGroup().then((result) => {
        let res = result.data
        if (res.code === 0) {
          this.form_data = res.data
        } else {
          this.$message.error(res.msg);
        }
      }).catch((err) => {
        this.$message.error('服务器网络错误，请稍后重试');
      });
    }
  },
  created () {
    this.get_Setting()
  },
}
</script>

<style lang="less" scoped>
.container {
  padding: 20px;
  .section {
    .title {
      width: 120px;
      height: 30px;
      background-color: #409eff;
      line-height: 30px;
      font-size: 16px;
      text-align: center;
      color: #fff;
      box-shadow: 1px 1px 30px rgba(0, 0, 0, 0.1);
      margin-bottom: 20px;
    }
    .info {
      margin-left: 40px;

      .list-item {
        margin-bottom: 20px;
        color: #666;
        .tip {
          font-size: 16px;
          display: inline-block;
          vertical-align: middle;
          width: 130px;
          text-align: right;
        }
        .content {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    .sub-btn {
      width: 100px;
      margin: 120px auto;
    }
  }
}
</style>
